<template>
    <div class="horizontal-pager" ref="pagerRef">
        <div class="page-container" :style="containerStyle">
            <div v-for="(page, index) in pages" :key="index" class="page" :class="{ active: currentPage === index }"
                :style="{ width: `${pageWidth}px` }">
                <component :is="page.component" v-bind="page.props" />
            </div>
        </div>

        <div class="nav-dots">
            <button v-for="(_, index) in pages" :key="`dot-${index}`" :class="{ active: currentPage === index }"
                @click="goToPage(index)" />
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useElementSize } from '@vueuse/core'
import gsap from 'gsap'

const props = defineProps({
    pages: {
        type: Array,
        required: true
    },
    startPage: {
        type: Number,
        default: 0
    }
})

const pagerRef = ref(null)
const { width: pagerWidth } = useElementSize(pagerRef)
const currentPage = ref(props.startPage)
const pageWidth = computed(() => pagerWidth.value || window.innerWidth)

const containerStyle = computed(() => ({
    width: `${pageWidth.value * props.pages.length}px`,
    transform: `translateX(-${currentPage.value * pageWidth.value}px)`
}))

function goToPage(index) {
    if (index === currentPage.value) return

    gsap.to(pagerRef.value.querySelector('.page-container'), {
        x: -index * pageWidth.value,
        duration: 1,
        ease: "power3.inOut"
    })

    currentPage.value = index
}

// 添加键盘和触摸滑动支持
onMounted(() => {
    // 键盘左右箭头导航
    window.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            goToPage(Math.max(0, currentPage.value - 1))
        } else if (e.key === 'ArrowRight') {
            goToPage(Math.min(props.pages.length - 1, currentPage.value + 1))
        }
    })

    // 触摸滑动支持
    let startX = 0
    pagerRef.value.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX
    }, { passive: true })

    pagerRef.value.addEventListener('touchend', (e) => {
        const endX = e.changedTouches[0].clientX
        const diff = startX - endX

        if (diff > 50) { // 向左滑动
            goToPage(Math.min(props.pages.length - 1, currentPage.value + 1))
        } else if (diff < -50) { // 向右滑动
            goToPage(Math.max(0, currentPage.value - 1))
        }
    }, { passive: true })
})
</script>

<style scoped>
.horizontal-pager {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    touch-action: pan-y;
}

.page-container {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
}

.page {
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.nav-dots {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 100;
}

.nav-dots button {
    width: 0.1rem;
    height: 0.1rem;
    gap: 0.3rem;
}

.nav-dots button.active {
    transform: scale(1.1);
}
</style>